<template>
  <div class="person">
    <div class="person-bg"></div>
    <div class="flex flex-between align-center person-info">
      <div class="person-info-r">
        <div class="person-info-r-dname">上级主治医师：<br /><span>{{userInfo.doctorBaseInfo.upDoctorName}}</span></div>
        <div class="person-info-r-hname">执业医院：<br /><span>{{userInfo.doctorBaseInfo.hospitalName}}</span></div>
      </div>
      <div class="person-info-l">
        <img :src="userInfo.doctorBaseInfo.pic" alt="">
      </div>
    </div>
    <!-- 医生团队 -->
    <div class="hospital-two">
      <div class="flex flex-center align-center hospital-two-title">
        <span class="hospital-two-title-s1"></span>
        <span class="hospital-two-title-s2"></span>
        <span class="hospital-two-title-content">医生团队</span>
        <span class="hospital-two-title-s2"></span>
        <span class="hospital-two-title-s1"></span>
      </div>
      <div class="hospital-two-content">
        <div class="flex flex-left hospital-two-list" v-for="item in userInfo.doctorDepInfos" :key="item.id">
          <div class="flex flex-right align-center hospital-two-list-title">{{item.depName}}：</div>
          <div class="flex flex-left flex-wrap hospital-two-list-r">
            <div class="flex flex-left align-center hospital-two-list-r-l" v-for="docitem in item.doctors" :key="docitem.id">
              {{docitem.name}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 查房日历 -->
    <div class="person-calendar">
      <div class="flex flex-center align-center person-calendar-title">
        <span class="hospital-two-title-s1"></span>
        <span class="hospital-two-title-s2"></span>
        <span class="hospital-two-title-content">查房日历</span>
        <span class="hospital-two-title-s2"></span>
        <span class="hospital-two-title-s1"></span>
      </div>
      <div class="person-calendar-main">
        <div class="flex flex-column calender-main">
          <div class="flex flex-left align-center calender-main-week">
            <span v-for="item in week" :key="item.id">{{ item }}</span>
          </div>
          <div class="calender-main-list">
            <van-swipe class="my-swipe" :show-indicators="false">
              <van-swipe-item>
                <div class="calender-main-title">{{ nowDate }}</div>
                <div class="flex flex-left flex-wrap calender-main-date">
                  <div class="calender-main-date-list" v-for="item in dateList" :key="item.id"
                      :class="!item.isSelect?'calender-main-date-list1':(item.isWork ? 'calender-main-date-list2' : '')"
                      @click="selectCalendarFunc(item.dateTime, item.workId, item.works, item.searchRoom, item.searchRoomRemark, item.isSelect, item.isWork)">
                      <!-- <span v-if="item.isSelect && !item.isWork">{{ item.dateName }}</span> -->
                      <span v-if="item.isSelect && item.isWork">查房</span>
                      <span v-else>{{ item.dateName }}</span>
                  </div>
                </div>
              </van-swipe-item>
              <van-swipe-item>
                <div class="calender-main-title">{{ nowDate1 }}</div>
                <div class="flex flex-left flex-wrap calender-main-date">
                  <div class="calender-main-date-list" v-for="item in nextMonthArr" :key="item.id"
                      :class="!item.isSelect?'calender-main-date-list1':(item.isWork ? 'calender-main-date-list2' : '')"
                      @click="selectCalendarFunc(item.dateTime, item.workId, item.works, item.searchRoom, item.searchRoomRemark, item.isSelect, item.isWork)">
                      <span v-if="item.isSelect && item.isWork">查房</span>
                      <span v-else>{{ item.dateName }}</span>
                  </div>
                </div>
              </van-swipe-item>
            </van-swipe>
          </div>
        </div>
      </div>
    </div>
    <!-- 二维码 -->
<!--    <div class="person-qr">-->
<!--      <img :src="userInfo.belowPic" alt="">-->
<!--    </div>-->
  </div>
</template>
<script>
import {doctorWorkList} from '@/api/index.js'
export default {
  data() {
    return{
      dactorList: [],
      showWork: false,
      remark: '',
      userInfo: '',
      workDateArr: [],
      week: ['日', '一', '二', '三', '四', '五', '六'],
      nowDate: '',
      nowDate1: '',
      dateList: [],
      nextMonthArr: [],
      workDateId: '',
      time: '',
      radioCheck: '1',
      isLoading: false
    }
  },
  created() {
    let aDate = new Date();
    let y = aDate.getFullYear();
    let m = aDate.getMonth() + 1;
    let newDate = new Date(y, m, 0).getDate();
    console.log('newDate', newDate)
    this.maxDate = new Date(y,aDate.getMonth(),newDate)
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo')).config;
    this.queryDoctorWorkFunc();
  },
  methods: {
    // 获取查房列表
    queryDoctorWorkFunc() {
      let data = 'userId=' + JSON.parse(sessionStorage.getItem('userInfo')).id;
      doctorWorkList(data).then(res => {
        console.log('查房列表', res.data)
        this.workDateArr = res.data;
        this.calenderFunc();
      })
    },
    // 补0
    addZeroFunc(n) {
      return n >= 10 ? n : '0' + n;
    },
    // 日历时间设置
    calenderFunc() {
      let aDate = new Date();
      let y = aDate.getFullYear();
      let m = aDate.getMonth() + 1;
      // 获取当月的第一天是周几
      let week = new Date(y, aDate.getMonth(), 1).getDay();
      // 获取当月有多少天
      let newDate = new Date(y, m, 0).getDate();
      this.nowDate = y + '年' + this.addZeroFunc(m) + '月';
      let nowDateTime = y + '-' + this.addZeroFunc(m);
      // 获取下个月的第一天是周几
      let nextMonthWeek = new Date(y, m, 1).getDay();
      // 获取下个月有多少天
      let nextMonthDay = '', nextDateTime = '';
      // 判断当前月是不是12
      if (m == 12) {
        nextMonthDay = new Date(y + 1, 1, 0).getDate();
        this.nowDate1 = y + 1 + '年' + this.addZeroFunc(m % 12 + 1) + '月';
        nextDateTime = y + 1 + '-' + this.addZeroFunc(m % 12 + 1)
      } else {
        nextMonthDay = new Date(y, m + 2, 0).getDate();
        this.nowDate1 = y + '年' + this.addZeroFunc(m % 12 + 1) + '月';
        nextDateTime = y + '-' + this.addZeroFunc(m % 12 + 1)
      }
      // 当月的天数
      for (let i = 0; i < week; i++) {
        let json = {
          dateName: '',
          isSelect: false,
          dateTime: '',
          isWork: false,
          workId: '',
          works: '',
          searchRoom: false,
          searchRoomRemark: ''
        }
        this.dateList.push(json)
      }

      for (let j = 1; j <= newDate; j++) {
        let json = {
          dateName: j,
          isSelect: true,
          dateTime: nowDateTime + '-' + this.addZeroFunc(j),
          isWork: false,
          workId: '',
          works: '',
          searchRoom: false,
          searchRoomRemark: ''
        }
        // 今天之前的日期不可选择
        if (j < aDate.getDate()) {
          json.isSelect = false
        }
        // 判断什么时间有任务 显示不同状态
        for (let m = 0; m < this.workDateArr.length; m++) {
          if (json.dateTime == this.workDateArr[m].workDate && this.workDateArr[m].searchRoom) {
            json.isWork = true;
            json.workId = this.workDateArr[m].id;
            json.works = this.workDateArr[m].works;
            json.searchRoom = this.workDateArr[m].searchRoom;
            json.searchRoomRemark = this.workDateArr[m].searchRoomRemark;
          }
        }
        this.dateList.push(json)
      }
      // 下个月的天数
      for (let i = 0; i < nextMonthWeek; i++) {
        let json = {
          dateName: '',
          isSelect: false,
          dateTime: '',
          isWork: false,
          workId: '',
          works: '',
          searchRoom: false,
          searchRoomRemark: ''
        }
        this.nextMonthArr.push(json)
      }

      for (let j = 1; j <= nextMonthDay; j++) {
        let json = {
          dateName: j,
          isSelect: true,
          dateTime: nextDateTime + '-' + this.addZeroFunc(j),
          isWork: false,
          workId: '',
          works: '',
          searchRoom: false,
          searchRoomRemark: ''
        }
        // 判断什么时间有任务 显示不同状态
        for (let m = 0; m < this.workDateArr.length; m++) {
          if (json.dateTime == this.workDateArr[m].workDate && this.workDateArr[m].searchRoom) {
            json.isWork = true;
            json.workId = this.workDateArr[m].id;
            json.works = this.workDateArr[m].works;
            json.searchRoom = this.workDateArr[m].searchRoom;
            json.searchRoomRemark = this.workDateArr[m].searchRoomRemark;
          }
        }
        this.nextMonthArr.push(json)
      }
    },
    // 点击选中日期弹出窗口
    selectCalendarFunc(val, id, works, searchRoom, searchRoomRemark, isSelect, isWork) {
      console.log('val1111',id, works,  searchRoom, searchRoomRemark)
      if (isSelect && isWork){
        this.time = val;
        this.workDateId = id;
        this.radioCheck = searchRoom ? '1'  : '0';
        this.remark = searchRoomRemark;
        this.$dialog.alert({
          title: '查房',
          message: searchRoomRemark,
          confirmButtonText: '知道了'
        })
        .then(() => {

        })
        .catch(() => {

        });
      }
    },
  }
}
</script>
<style scoped>
.person{
  position: relative;
  width: auto;
  height: auto;
  padding: 120px 11px 60px;
  margin-bottom: 0px !important;
  overflow: hidden;
  background-color: #F1F1F1;
}
.person-bg{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 175px;
  background: url("")no-repeat top center;
  background-size: cover;
}
.person-info{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 157px;
  background: url("")no-repeat center center;
  background-size: contain;
}
.person-info-l{
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 20px;
}
.person-info-l img{
  widows: 100%;
  height: 100%;
  vertical-align: top;
}
.person-info-r{
  width: auto;
  height: auto;
  flex: 1;
  margin: 0 20px;
  overflow: hidden;
}
.person-info-r-dname,.person-info-r-hname{
  width: 100%;
  height: auto;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}
.person-info-r-hname{
  margin-top: 10px;
}
.person-info-r-dname span{
  font-size: 18px;
}
.hospital-two{
  width: auto;
  height: auto;
  padding: 15px 10px;
  margin-top: 15px;
  background-color: #fff;
  box-shadow: 1px 1px 4px 0px rgba(8, 1, 3, 0.2);
  border-radius: 10px;
}
.hospital-two-title{
  width: 100%;
  height: auto;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}
.hospital-two-title-content{
   font-size: 18px;
  font-weight: 500;
  background-image: linear-gradient(0deg, #08C68E 0%, #2883C9 100%);
  background-image: -webkit-linear-gradient(0deg, #08C68E 0%, #2883C9 100%); /* Safari 5.1-6.0 */
  background-image: -o-linear-gradient(0deg, #08C68E 0%, #2883C9 100%); /* Opera 11.1-12.0 */ 
  background-image: -moz-linear-gradient(0deg, #08C68E 0%, #2883C9 100%); /* Firefox 3.6-15 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hospital-two-title-s1{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #28C99A;
}
.hospital-two-title-s2{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #28C99A;
}
.hospital-two-title-s1:nth-child(1){
  margin-right: 4px;
}
.hospital-two-title-s1:nth-child(5){
  margin-left: 4px;
}
.hospital-two-title-s2:nth-child(2){
  margin-right: 10px;
}
.hospital-two-title-s2:nth-child(4){
  margin-left: 10px;
}
.hospital-one-content{
  width: 100%;
  height: auto;
  margin-top: 15px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #ececec;
  background-color: #ececec;
}
.hospital-two-content{
  width: 100%;
  height: auto;
  margin-top: 15px;
  margin-left: 15px;
}
.hospital-two-list{
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
.hospital-two-list-title{
  width: 60px;
  height: 35px;
  color: #111;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  margin-right: 10px;
}
.hospital-two-list-r{
  width: auto;
  height: auto;
  flex: 1;
  overflow: hidden;
}
.hospital-two-list-r-l{
  width: auto;
  height: auto;
  padding: 5px 10px;
  border-radius: 5px;
  color: #08C68E;
  font-size: 12px;
  font-weight: 500;
  margin-right: 5px;
  margin-bottom: 5px;
  overflow: hidden;
  border: 1px solid #08C68E;
}
.hospital-two-list-r-l-icon{
  display: block;
  width: 25px;
  height: 25px;
  vertical-align: top;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 5px;
}
.person-calendar{
  width: auto;
  height: auto;
  padding: 15px 10px;
  margin-top: 15px;
  background-color: #fff;
  box-shadow: 1px 1px 4px 0px rgba(8, 1, 3, 0.2);
  border-radius: 10px;
}
.person-calendar-title{
  width: 100%;
  height: auto;
  color: #111;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  margin-bottom: 15px;
}
.person-calendar-main{
  widows: 100%;
  height: auto;
}
.person-qr{
  width: 100%;
  height: auto;
}
.person-qr img{
  width: 100%;
  height: auto;
  vertical-align: top;
}
.person-edit{
  width: 345px;
  height: 100%;
  background-color: #fff;
}
.person-edit-list{
  width: auto;
  height: auto;
  padding: 15px 15px 0px;
}
.person-edit-list-title{
  width: 60px;
  height: auto;
  color: #666;
  font-size: 14px;
  font-weight: 400;
  margin-right: 10px;
}
.person-edit-list-title1{
  width: 60px;
  height: 45px;
}
.person-edit-list-remark{
  width: auto;
  height: auto;
  flex: 1;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #ececec;
}
.person-edit-btn{
  width: auto;
  height: auto;
  padding: 15px;
}
.calender-main {
  width: 100%;
  height: 100%;
}

.calender-main-list {
  width: auto;
  height: auto;
  flex: 1;
  padding: 10px 0px 10px;
  overflow: hidden;
}

.calender-main-week {
  width: auto;
  height: auto;
  padding: 0px 0px 0;
  border-top: 1px solid #E2E2E2;
  border-bottom: 1px solid #E2E2E2;
}

.calender-main-title {
  width: 100%;
  height: auto;
  columns: #333;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  margin-top: 15px;
}

.calender-main-week span {
  display: block;
  width: auto;
  height: auto;
  flex: 1;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  padding: 10px;
  overflow: hidden;
}

.calender-main-date {
  width: 100%;
  height: auto;
}

.calender-main-date-list {
  width: 43px;
  height: 43px;
  overflow: hidden;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  line-height: 43px;
  padding: 0px 0px;
  text-align: center;
  border-radius: 50%;
  margin-right: 5px;
}

.calender-main-date-list:nth-child(7n){
  margin-right: 0px;
}

.calender-main-date-list1 {
  color: #999;
}

.calender-main-date-list2 {
  color: #fff;
  background-color: #42DDA2;
}
</style>
